<template>
    <div class="body">
        <div class="nav">
            <el-menu 
                :default-active="activeIndex" 
                class="el-menu-demo" 
                mode="vertical" 
                @select="handleSelect" 
                text-color="#fff" 
                active-text-color=#fff
            >
                <div style="height: 70px;text-align: center;display: flex;flex-direction: column;justify-content: center;color: white;font-size: 20px;">宠物之家后台管理</div>
                <div style="height: 400px;display: flex;flex-direction: column;justify-content: space-between;">
                    <el-menu-item index="1" style="width: 50%;margin: 0 auto;">领养申请</el-menu-item>
                    <el-menu-item index="2" style="width: 50%;margin: 0 auto;">救助申请</el-menu-item>
                    <el-menu-item index="3" style="width: 50%;margin: 0 auto;">用户管理</el-menu-item>
                    <el-menu-item index="4" style="width: 50%;margin: 0 auto;">返回登录</el-menu-item>
                </div>
                <el-menu-item index="5" style="width: 50%;margin: 0 auto;">退出</el-menu-item>
            </el-menu>

        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue';


const router = useRouter()

const activeIndex = ref("领养申请")

function handleSelect(index){
    if(index === "1"){
        router.push("/manage")
    }else if(index === "2"){
        router.push("/managein")
    }else if(index === "3"){
        router.push("/manageuser")
    }else if(index === '4'){
        router.push("/managelogin")
    }else{
        router.push("/login")
    }
}

</script>

<style scoped>
    .body{
        height: 742px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
    }
    .nav{
        width: 200px;
        height: 100%;
        background-color: #03a850;
    }
    .el-menu-demo{
        width: 100%;
        height: 100%;
        background-color: #03a850;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    ::v-deep .el-menu-item:hover{
        background-color: #03a850;
    }
    ::v-deep .is-active{
        background-color: #03a850 !important;
    }
</style>
  